<!DOCTYPE html>
<html>
<head>
	<meta name="viewpoint" content="width-device-width, initial-scale=1">
	<link rel="stylesheet" href="jquery.mobile-1.4.2.min.css" />
	<style type="text/css">
		#buttonPanel{ width: 100 % ; height: 8% ; overflow: hidden; margin:0;font-size:2em;padding-top: 16px;padding-left: 5px;}
		.fitfont{font-size: 1.5em}
		#id1{ width: 100 % ; height:300px ; overflow: auto; margin:0;background-color:white;}
		#map { width: 100 % ; height: 100% ; overflow: hidden; margin:0;padding:0;background-color:red;}
		#main{margin:0;padding:0;width:100 %;height: 100%;background-color:yellow;}  
		body{margin: 0;padding: 0;width: 100%;background-color:blue}
		head{width: 0px;height: 0px}
	</style>
	<script src="jquery-1.9.1.min.js"></script>
	<script src="jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

	<div data-role='page' id="main">

		<ul data-role="listview">
		<li>
			<a href="#dialog" data-rel="popup" class="ui-btn ui-corner-all ui-mini ui-btn-inline fitfont" data-transition="pop"  >open </a>

		</li>
			<a href="#"  class="ui-btn ui-corner-all ui-mini ui-btn-inline fitfont"   onclick="zoomInMap();">+</a>
			<a href="#"  class="ui-btn ui-corner-all ui-mini ui-btn-inline fitfont"  onclick="zoomOutMap();">-</a>
			<a href="#soloWindowMap"  data-rel="popup"  class="ui-btn ui-corner-all ui-mini ui-btn-inline fitfont" onclick="soloMap();">popup</a>
			
			
		</ul>
		<ul data-role="listview">
			<li>
			<div class="ui-bar ui-bar-a" style="height:400px;width=100%;padding:0;" id="origMapContainer" >
			<div id="map" >map</div>
			</div>
			</li>
			<li>
				<div id="id1">sdfsdf</div>
			</li>
		</ul>
		<div class="ui-grid-b">
			<div class="ui-block-a"><a href="#walkingPopup" class=" ui-btn   ui-corner-all fitfont" data-rel="popup">Walking</a></div>
			 <div class="ui-block-b"><a href="#busPopup" class="ui-btn   ui-corner-all fitfont" data-rel="popup">Bus</a></div>
			 <div class="ui-block-c"><a href="#drivingPopup" class="ui-btn   ui-corner-all fitfont" data-rel="popup">Driving</a></div>
			
		</div>
		<!-- popups begin -->
		<div id="dialog"  data-role="popup" class="fitfont">
		<input type="text" name="destination" value="广西大学" id="textDes"/>
		<a href="#" class="ui-btn ui-corner-all   ui-btn-b  ui-btn-inline" data-rel="back" onclick="findByDestination();" style="font-size:1.1em;">Ok</a>
		<a href="#" class="ui-btn ui-corner-all   ui-btn-b ui-btn-inline" data-rel="back"  style="font-size:1.1em;">Cancel</a>
		</div>

		<div data-role="popup" id="soloWindowMap" class="ui-content " >
		<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" onclick="">Close</a>
		<div  id="soloMapContainter"></div>
		</div>

		<div data-role="popup" id="walkingPopup">
			<ol data-role="listview"  id="walkingListView" class="fitfont">
			<li>
				sdfasdf
			</li>
			<li>sfsdf</li>
			</ol>
		</div>

		<div data-role="popup" id="busPopup">
			<ol data-role="listview"  id="busListView" class="fitfont">
			<li >
				sdfasdf
			</li>
			<li>sfsdf</li>
			</ol>
		</div>

		<div data-role="popup" id="drivingPopup">
			<ol data-role="listview"  id="drivingListView" class="fitfont">
			<li>
				sdfasdf
			</li>
			<li>sfsdf</li>
			</ol>
		</div>
		<!-- popups end -->
	</div>
</body>
</html>

<script type="text/javascript" src="LBS.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dIxxNjwL75O1iLrXxKFmPmii"></script>
<script type="text/javascript">
	function commonOut(text) {
		document.getElementById("id1").innerHTML += text + " <br/> ";
	}


	function start() {
		try {
			registerEvents();//register gui action event
			LBS.createMap('map');
			LBS.start();
			//setMapSize();
		} catch(e) {
			alert(e);
		}
	}

	function zoomInMap()
	{
		if(!LBS.mapObject)
		{
			return;
		}
		var zoom=LBS.mapObject.getZoom()
		zoom+=1;
		LBS.mapObject.setZoom(zoom);
		commonOut(zoom);

	}
	function zoomOutMap()
	{
		if(!LBS.mapObject)
		{
			return;
		}
		var zoom=LBS.mapObject.getZoom()
		zoom-=1;
		LBS.mapObject.setZoom(zoom);
		commonOut(zoom);

	}
	function soloMap()
	{
		var main=document.getElementById("main");
		var currentStyle = window.getComputedStyle(main, null); 
		var width=window.parseInt(currentStyle.width);
		 var p = $( "#map" ).detach();
		p.appendTo( "#soloMapContainter" );
		document.getElementById("soloMapContainter").style.height=width*.8+"px";
		document.getElementById("soloMapContainter").style.width=width*.8+"px";

		
	}
	function replaceMap()
	{
		var p = $( "#map" ).detach();
		p.appendTo( "#origMapContainer" );
	}
	function registerEvents()
	{
		$( "#soloWindowMap" ).on( "popupafterclose", function( event, ui ) {replaceMap();} );
	}
	function findByDestination()
	{
		var desText=document.getElementById("textDes");
		if(desText)
		{
			var text=desText.value;
			LBS.findLocation(text,'南宁市');
			var route=new LBS.Route(LBS.mapObject,LBS.curPosition);
			route.findRoute(text);
		}
		

	}
	window.onload = start();
</script>
